<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>各年龄段浏览比例对比</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#6366F1',      // 主色调：靛蓝色
            浏览比例: '#10B981',    // 浏览比例：绿色
            平均比例: '#F59E0B',    // 平均比例：橙色
            age1: '#10B981',        // 1-20岁：绿色
            age2: '#10B981',        // 21-30岁：绿色
            age3: '#6366F1',        // 31-40岁：靛蓝色
            age4: '#6366F1',        // 41-50岁：靛蓝色
            age5: '#6366F1',        // 51+岁：靛蓝色
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        }
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .chart-container {
        @apply bg-white rounded-xl p-6 shadow-md;
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-gray-800 min-h-screen p-4 md:p-8">
<!-- 页面标题 -->
<div class="mb-6 text-center">
  <h1 class="text-2xl md:text-3xl font-bold text-gray-800">用户浏览行为分析</h1>
</div>

<!-- 核心图表：各年龄段浏览比例对比 -->
<div class="max-w-4xl mx-auto chart-container">
  <div class="flex justify-between items-center mb-6">
    <h2 class="font-bold text-lg">各年龄段浏览比例对比</h2>
    <div class="text-sm text-gray-600">数据来源：用户行为分析</div>
  </div>
  <div class="h-80 md:h-96">
    <canvas id="ageBrowseChart"></canvas>
  </div>
</div>

<script>
  // 1. 浏览比例数据
  const browseData = [
    { age_group: "1-20岁", browse_ratio: 50.9, color: "rgb(16, 185, 129)" },
    { age_group: "21-30岁", browse_ratio: 50.0, color: "rgb(16, 185, 129)" },
    { age_group: "31-40岁", browse_ratio: 49.2, color: "rgb(99, 102, 241)" },
    { age_group: "41-50岁", browse_ratio: 48.0, color: "rgb(99, 102, 241)" },
    { age_group: "51+岁", browse_ratio: 48.7, color: "rgb(99, 102, 241)" }
  ];

  // 整体平均比例
  const overallAverage = 49.4;

  // 2. 绘制各年龄段浏览比例对比图表
  const drawAgeBrowseChart = () => {
    const ctx = document.getElementById("ageBrowseChart").getContext("2d");
    if (!ctx) return;

    // 准备数据集
    const browseDataset = {
      label: "浏览比例 (%)",
      data: browseData.map(item => item.browse_ratio),
      backgroundColor: browseData.map(item => item.color),
      borderColor: browseData.map(item => item.color),
      borderWidth: 1,
      borderRadius: 4,
      barPercentage: 0.6,
    };

    // 平均比例参考线数据集
    const averageDataset = {
      label: "平均比例",
      data: browseData.map(() => overallAverage),
      type: "line",
      borderColor: "rgb(245, 158, 11)",
      borderWidth: 2,
      borderDash: [5, 5],
      pointBackgroundColor: "rgb(245, 158, 11)",
      pointRadius: 4,
      pointHoverRadius: 6,
      fill: false,
      tension: 0,
      yAxisID: 'y1'
    };

    // 创建图表
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: browseData.map(item => item.age_group),
        datasets: [browseDataset, averageDataset]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          x: {
            grid: {
              display: false
            }
          },
          y: {
            beginAtZero: false,
            min: 47,
            max: 52,
            ticks: {
              callback: function(value) {
                return value + '%';
              }
            },
            grid: {
              color: 'rgba(0, 0, 0, 0.05)'
            }
          },
          y1: {
            beginAtZero: false,
            min: 47,
            max: 52,
            position: 'right',
            ticks: {
              display: false
            },
            grid: {
              display: false
            }
          }
        },
        plugins: {
          legend: {
            position: 'top',
            labels: {
              usePointStyle: true,
              boxWidth: 6,
              font: {
                size: 12
              }
            }
          },
          tooltip: {
            callbacks: {
              label: function(context) {
                let label = context.dataset.label || '';
                if (label) {
                  label += ': ';
                }
                label += context.raw + '%';

                // 计算与平均值的差异
                if (context.datasetIndex === 0) {
                  const diff = (context.raw - overallAverage).toFixed(1);
                  const trend = diff >= 0 ? '高于' : '低于';
                  label += ` (${trend}平均值${Math.abs(diff)}%)`;
                }

                return label;
              }
            }
          }
        },
        animation: {
          duration: 1500,
          easing: 'easeOutQuart'
        }
      }
    });
  };

  // 3. 页面加载完成后初始化图表
  document.addEventListener("DOMContentLoaded", () => {
    drawAgeBrowseChart();
  });
</script>
</body>
</html>